<template>
  <div @click="hideComment">
    <el-row>
      <!--头像开始-->
      <el-col :span="2">
        <div style="position:relative;">
          <div v-if="userInfoStyle.visible" :style="userInfoStyle" @click.stop>
            <user-info :id="moment.userId"></user-info>
          </div>
          <img style="width: 35px;height: 35px;cursor:pointer" :src="moment.avatar" @click="showUserInfo" @click.stop>
        </div>
      </el-col>
      <!--头像结束-->
      <el-col :span="22" style="border-bottom: 1px solid #f3f3f3">
        <p style="margin: 0 0 0 8px;color: #7686cc;cursor:pointer">{{moment.comment}}</p>
        <p ref="content" style="margin: 0px 8px" :class="{ 'comment-short': !showFull }" class="comment-content" v-html="moment.textContent"></p>
        <span style="cursor: pointer;margin-left: 8px;color: #7686cc" v-if="!showFull" @click="showFull = true">全文</span>
        <span style="cursor: pointer;margin-left: 8px;color: #7686cc" v-if="textHeight > minHeight && showFull" @click="showFull = false">收起</span><br>
        <!--照片墙开始-->
        <picture-wall :imgUrlArr="moment.mediaUrls" v-if="moment.type === 0"></picture-wall>
        <!--照片墙结束-->
        <!--视频开始-->
        <video v-if="moment.type === 1" style="width: 300px;" :src="moment.mediaUrls[0]" controls></video>
        <!--视频结束-->
        <el-row>
          <el-col :span="10">
            <span style="color: #9e9e9e;font-size: 15px;">{{dateFormat(moment.gmtCreate)}}</span>
          </el-col>
          <el-col :span="12" align="right">
            <div @click.stop :style="{'opacity': commentOpacity}" style="display: inline-block;color: white;line-height: 35px;text-align: center;
                      border-radius: 10px;overflow: hidden;cursor: pointer;background-color: #4c4c4c">
              <div style="display: inline-block;width: 100px;height: 35px;border-right: 1px solid #454545;background-color: #4c4c4c;" @click="thumbup">
                <span class="iconfont icon-thumbup" style="font-size:18px;vertical-align: bottom;margin-right: 5px"></span><span v-text="thumbupArr.includes(nickname) ? '取消' : '赞'"></span>
              </div>
              <div style="display: inline-block;width: 100px;height: 35px;background-color: #4c4c4c" @click="showTextarea()">
                <span class="iconfont icon-comment" style="font-size:18px;margin-right: 5px"></span><span>评论</span>
              </div>
            </div>
          </el-col>
          <el-col :span="2" align="right">
            <span class="el-icon-more" title="评论" style="background-color: #f7f7f7;padding: 0 5px;border-radius: 5px;cursor: pointer" @click="setCommentOpacity" @click.stop></span>
          </el-col>
        </el-row>
        <!--评论点赞开始-->
        <div v-if="!(commentArr.length === 0 && thumbupArr.length === 0)" style="background-color: #f7f7f7;padding: 10px;margin-bottom: 15px;">

          <!--点赞列表开始-->
          <div style="color: #7686cc;font-size: 15px">
            <span class="iconfont icon-thumbup" style="font-size: 18px;color: #7686cc;" v-if="thumbupArr.length !== 0"></span>
            <span v-for="(thumbup, i) in thumbupArr" :key="i" v-text="i === thumbupArr.length -1 ? thumbup : thumbup + ', '"></span>

          </div>
          <!--点赞列表结束-->
          <!--评论列表开始-->
          <ul v-if="commentArr.length !== 0" style="font-size: 15px;">
            <li v-for="(comment, i) in commentArr" :key="i">
              <p><span style="color: #7686cc;">{{comment.comment}} : </span><span v-html="comment.content" class="comment-content"></span></p>
            </li>
          </ul>
          <!--评论列表结束-->
          <!--评论输入框开始-->
          <div v-if="textareaVisible" @click.stop>
            <comment-input @getValue="comment"></comment-input>
          </div>
          <!--评论输入框结束-->
        </div>
        <!--评论点赞结束-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PictureWall from './PictureWall'
import CommentInput from './CommentInput'
import UserInfo from './UserInfo'

export default {
  props: {
    moment: {
      type: Object,
      required: true
    }
  },
  name: 'MomentItem',
  data () {
    return {
      commentOpacity: 0,
      height: 331,
      content: '',
      thumbupArr: [],
      commentArr: [],
      textareaVisible: false,
      nickname: this.$store.state.currentUser.nickname,
      showFull: true,
      textHeight: 0,
      minHeight: 58,
      userInfoStyle: {
        position: 'absolute',
        left: '20px',
        top: '20px',
        width: '250px',
        boxShadow: '0 0 10px #888',
        padding: '20px',
        backgroundColor: 'white',
        zIndex: 200,
        visible: false
      }
    }
  },
  mounted () {
    // 隐藏全文
    this.textHeight = this.$refs.content.clientHeight
    if (this.textHeight > this.minHeight) {
      this.showFull = false
    }
    this.loadThumbupList()
    this.loadCommentList()
  },
  methods: {
    setCommentOpacity () {
      this.commentOpacity = this.commentOpacity === 0 ? 1 : 0
    },
    hideComment () {
      this.commentOpacity = 0
      this.textareaVisible = false
      this.userInfoStyle.visible = false
    },
    showTextarea () {
      this.setCommentOpacity()
      console.log('showTextarea')
      this.textareaVisible = true
      console.log('this.textareaVisible = ' + this.textareaVisible)
    },
    hideTextarea () {
      this.textareaVisible = false
    },
    dateFormat (time) {
      let past = new Date(time)
      let pastDate = past.getDate()
      let pastMonth = past.getMonth()
      let pastYear = past.getFullYear()
      let pastHours = past.getHours()
      let pastMinutes = past.getMinutes()

      let now = new Date()
      let nowDate = now.getDate()
      let nowMonth = now.getMonth()
      let nowYear = now.getFullYear()
      let nowHours = now.getHours()
      let nowMinutes = now.getMinutes()

      let hours = past.getHours()
      let minutes = past.getMinutes() < 10 ? '0' + past.getMinutes() : past.getMinutes()

      if (pastYear === nowYear && pastMonth === nowMonth && nowDate === pastDate) {
        let remainder = nowHours - pastHours
        if (remainder === 0) {
          if (nowMinutes - pastMinutes === 0) {
            return '刚刚'
          } else {
            console.log('进来el1')
            return nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder === 1) {
          if (nowMinutes >= pastMinutes) {
            return remainder + '小时前'
          } else {
            return 60 + nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder > 1) {
          return remainder + '小时前'
        }
      } else if (pastYear === nowYear && pastMonth === nowMonth && (nowDate - pastDate) === 1) {
        return '昨天 '
      } else if (pastYear === nowYear && pastMonth === nowMonth &&
          (nowDate - pastDate) > 1 && (nowDate - pastDate) <= 7) {
        return nowDate - pastDate + '天前'
      } else if (pastYear === nowYear) {
        let month = pastMonth + 1
        return month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      } else {
        let month = pastMonth + 1
        return pastYear + '年' + month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      }
    },
    // 点赞，取消点赞
    thumbup () {
      console.log('thumbup 1')
      let formData = new FormData()
      let ownerId = this.$props.moment.userId
      formData.append('momentId', this.$props.moment.id)
      formData.append('ownerId', ownerId)

      if (this.thumbupArr.includes(this.nickname)) { // 取消赞
        this.axios.post('/api/v1/thumbup/cancel', formData).then((response) => {
          if (response.data.code === 1) {
            let index = this.thumbupArr.indexOf(this.nickname)
            this.thumbupArr.splice(index, 1)
          }
        }).catch((error) => {
          this.$message.error(error)
        })
      } else { // 点赞
        console.log('thumbup 2')
        this.axios.post('/api/v1/thumbup/up', formData).then((response) => {
          if (response.data.code === 1) {
            // 向点赞列表添加用户名
            console.log('thumbup 3')
            this.thumbupArr.push(this.nickname)
          } else {
            this.$message.error(response.data.message)
          }
        }).catch((error) => {
          this.$message.error(error)
        })
      }

      this.setCommentOpacity()
    },
    comment (value) {
      let content = this.getContent(value)
      let nickname = this.nickname
      let ownerId = this.$props.moment.userId

      let formData = new FormData()
      formData.append('momentId', this.$props.moment.id)
      formData.append('content', content)
      formData.append('ownerId', ownerId)
      this.axios.post('/api/v1/comment/publish', formData).then((response) => {
        if (response.data.code === 1) {
          // 向评论列表添加用户名和评论内容
          this.commentArr.push({comment: nickname, content})
        } else {
          this.$message.error(response.data.message)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    // 使用正则表达式和match()方法提取<p>标签的内容
    getContent (str) {
      let regex = /<p>(.*?)<\/p>/ // 匹配<p>标签及其内容
      let match = str.match(regex) // 执行匹配操作

      return match[1]
    },
    loadThumbupList () {
      let momentId = this.$props.moment.id
      this.axios.get(`/api/v1/thumbup/list?momentId=${momentId}`).then((response) => {
        if (response.data.code === 1) {
          this.thumbupArr = response.data.data
        } else {
          this.$message.error('加载点赞列表失败')
        }
      })
    },
    loadCommentList () {
      let momentId = this.$props.moment.id
      this.axios.get(`/api/v1/comment/list?momentId=${momentId}`).then((response) => {
        if (response.data.code === 1) {
          this.commentArr = response.data.data
        } else {
          this.$message.error('加载评论列表失败')
        }
      })
    },
    showUserInfo () {
      this.userInfoStyle.visible = true
    }
  },
  components: {
    PictureWall,
    CommentInput,
    UserInfo
  }
}
</script>
<style>
p .comment-content {
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-content.comment-short {
  max-height: 2.8em;
  overflow: hidden;
}
.comment-content img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

</style>
